<template>
  <view>
    <view class="flex-col page">
  <view class="flex-col section">
   
    <view class="mt-18 flex-row justify-center items-center relative group_2">
      <image
        class="image_4 pos"
        src="/static/bk1.png"
      />
      <text class="font text_2">意见反馈</text>
    </view>
  </view>
  <view class="flex-col relative group_3">
    <view class="flex-col justify-start items-end relative">
      <image
        class="image_5"
        src="/static/mie/3.png"
      />
      <view class="flex-col justify-start section_2 pos_2">
        <view class="flex-col justify-start section_3">
          <view class="group_4">
            <text class="font_2 text_3">联系在线客服</text>
            <text class="font_2">
              会更快哦，问题发生时
              <br />
            </text>
            <text class="font_2">请立即反馈~</text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start relative section_4">
      <view class="flex-col section_5">
        <view class="flex-row items-baseline">
          <text class="text_4">您的建议是？</text>
          <text class="font_3 text_5 ml-3">请先选择问题类型</text>
        </view>
        <view class="flex-col mt-17">
          <view class="flex-row">
            <view class="flex-col justify-start items-center text-wrapper_2">
              <text class="font_4 text_6">功能异常</text>
            </view>
            <view class="ml-10 flex-col justify-start items-center text-wrapper_2">
              <text class="font_4 text_7">操作体验</text>
            </view>
            <view class="ml-10 flex-col justify-start items-center text-wrapper_2">
              <text class="font_4 text_8">声音反馈</text>
            </view>
          </view>
          <view class="mt-10 flex-row">
            <view class="flex-col justify-start items-center text-wrapper_2">
              <text class="font_4 text_9">新功能建议</text>
            </view>
            <view class="flex-col justify-start items-center text-wrapper_3 ml-11">
              <text class="font_4 text_10">客服投诉</text>
            </view>
            <view class="flex-col justify-start items-center text-wrapper_2 ml-11">
              <text class="font_4 text_11">其他</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start relative section_6 view">
      <view class="flex-row justify-between items-center section_8">
        <text class="font_5">请选择</text>
        <image
          class="image_6"
          src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=828c8b6c648283e009f38a80562bde04.png"
        />
      </view>
      <view class="flex-col justify-start section_7 pos_3">
        <view class="flex-col justify-start items-center text-wrapper_4"><text class="font">客服号*</text></view>
      </view>
    </view>
    <view class="flex-col justify-start relative section_6 view_2">
      <view class="flex-row justify-between items-center section_8">
        <text class="font_5">请选择</text>
        <image
          class="image_6"
          src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=828c8b6c648283e009f38a80562bde04.png"
        />
      </view>
      <view class="flex-col justify-start section_9 pos_4">
        <view class="flex-col justify-start items-center text-wrapper_5">
          <text class="font text_12">沟通时段*</text>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start relative group_5">
    <view class="flex-col justify-start section_6 view_3">
      <view class="flex-col justify-start items-start text-wrapper_6">
        <text class="font_5 text_18">请输入手机号，以方便我们回复您</text>
      </view>
    </view>
    <view class="flex-col justify-start section_10 pos_5">
      <view class="flex-col section_12">
        <view class="flex-col">
          <text class="self-end text_14">0/500</text>
          <text class="self-stretch font_5 text_15 mt-13">
            尽情吐槽您不爽的地方，或对我们提出改进性建议我们每条都会看的
          </text>
        </view>
        <view class="flex-col mt-107">
          <view class="flex-col justify-start self-stretch relative group_6">
            <view class="flex-row">
              <image
                class="equal-division-item image_8"
                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=d67782952cdd1f3a4fc858c0bed9d29d.png"
              />
              <view class="ml-10 flex-col justify-start items-center equal-division-item image-wrapper">
                <image
                  class="image_10"
                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=0647ae77fd3c260b51bf4e1954eecf86.png"
                />
              </view>
              <view class="ml-10 flex-col justify-start items-center equal-division-item image-wrapper_2">
                <image
                  class="image_9"
                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=0c2b61a9fe165508ab8fb68dfbb62543.png"
                />
              </view>
            </view>
            <image
              class="image_7 pos_7"
              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=ac71b0693b8f70c2ef32b59d2e9537d3.png"
            />
          </view>
          <text class="self-start font_3 text_16 mt-13">上传问题截图/视频可以让问题快速解决哦(2/9)</text>
        </view>
      </view>
      <view class="flex-col justify-start section_11 pos_6">
        <view class="flex-col justify-start items-center text-wrapper_5">
          <text class="font text_13">问题描述*</text>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start section_9 pos_8">
      <view class="flex-col justify-start items-center text-wrapper_5">
        <text class="font text_17">联系方式*</text>
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-5 {
  margin-left: 10rpx;
}
.ml-3 {
  margin-left: 6rpx;
}
.mt-17 {
  margin-top: 34rpx;
}
.ml-11 {
  margin-left: 22rpx;
}
.mt-107 {
  margin-top: 214rpx;
}
.mt-13 {
  margin-top: 26rpx;
}
.page {
  padding-bottom: 216rpx;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.section {
  padding: 24rpx 32rpx 220rpx;
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
}
.group {
  padding-left: 8rpx;
}
.text-wrapper {
  padding: 8rpx 0;
  border-radius: 48rpx;
  width: 108rpx;
  height: 42rpx;
}
.text {
  color: #000000;
  font-size: 30rpx;
  font-family: Alibaba PuHuiTi 2;
  line-height: 21.44rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22rpx;
}
.group_2 {
  padding: 12rpx 0 8rpx;
}
.image_4 {
  border-radius: 50%;
  width: 52rpx;
  height: 52rpx;
}
.pos {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.font {
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  line-height: 30.5rpx;
  font-weight: 700;
  color: #333333;
}
.text_2 {
  color: #000000;
  line-height: 30.14rpx;
  font-weight: unset;
}
.group_3 {
  margin-top: -220rpx;
  padding-left: 26rpx;
  padding-right: 8rpx;
  height: 894rpx;
}
.image_5 {
  width: 272rpx;
  height: 272rpx;
}
.section_2 {
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=c6265f781cdd14694516d386738e57e9.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 454rpx;
}
.pos_2 {
  position: absolute;
  left: 4rpx;
  top: 46rpx;
}
.section_3 {
  padding: 12rpx 0 24rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=507bfca59700dabf65f45331c6fcc27b.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 448rpx;
}
.group_4 {
  margin: 0 28rpx;
  line-height: 36rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 36rpx;
  color: #666666;
}
.text_3 {
  color: #333333;
  font-weight: 700;
}
.section_4 {
  margin-right: 20rpx;
  margin-top: -64rpx;
  padding: 4rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=51288488a5fa586551d07f3953257aee.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_5 {
  margin: 0 4rpx;
  padding: 28rpx 32rpx 36rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=edadb403ff460c694f689fcb4547adca.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_4 {
  color: #333333;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  line-height: 33.52rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  color: #999999;
}
.text_5 {
  line-height: 22.2rpx;
}
.font_4 {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 25.82rpx;
  color: #666666;
}
.text_6 {
  line-height: 25.9rpx;
}
.text-wrapper_2 {
  flex: 1 1 194rpx;
  padding: 28rpx 0;
  background-color: #f3eedf;
  border-radius: 12rpx;
  height: 80rpx;
}
.text_7 {
  line-height: 25.98rpx;
}
.text_8 {
  line-height: 26.12rpx;
}
.text_9 {
  line-height: 26.06rpx;
}
.text-wrapper_3 {
  padding: 28rpx 0;
  flex: 1 1 194rpx;
  background-color: #ffe944;
  border-radius: 12rpx;
  height: 80rpx;
  border-left: solid 1rpx #666666;
  border-right: solid 1rpx #666666;
  border-top: solid 1rpx #666666;
  border-bottom: solid 1rpx #666666;
}
.text_10 {
  color: #333333;
  line-height: 26.32rpx;
}
.text_11 {
  line-height: 25.68rpx;
}
.section_6 {
  padding: 24rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=0ab88babfd06b04b5ecdc4ef80e649e2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.view {
  margin-right: 16rpx;
}
.section_8 {
  margin: 0 8rpx;
  padding: 84rpx 32rpx 32rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=ad8a5c3b3302368ff50877b39f866cb4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.font_5 {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 25.82rpx;
  color: #999999;
}
.image_6 {
  margin-right: 20rpx;
  width: 6rpx;
  height: 12rpx;
}
.section_7 {
  padding: 2rpx 0;
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=d61d65edeeacf9d16208b75500f98177.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 160rpx;
}
.pos_3 {
  position: absolute;
  left: -4.02rpx;
  top: 14rpx;
}
.text-wrapper_4 {
  padding: 16rpx 0;
  background-color: #fff6d2;
  border-radius: 94rpx 94rpx 84rpx 94rpx;
  width: 154rpx;
}
.view_2 {
  margin-right: 16rpx;
  margin-top: -16rpx;
}
.section_9 {
  padding: 2rpx 0;
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=91a41386a5613a26620f70907983529e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 192rpx;
}
.pos_4 {
  position: absolute;
  left: -4.02rpx;
  top: 14rpx;
}
.text-wrapper_5 {
  padding: 16rpx 0;
  background-color: #fff6d2;
  border-radius: 94rpx 94rpx 84rpx 94rpx;
  width: 186rpx;
}
.text_12 {
  line-height: 30.6rpx;
}
.group_5 {
  margin-top: -16rpx;
  padding-top: 692rpx;
}
.view_3 {
  margin: 0 24rpx;
}
.text-wrapper_6 {
  margin: 0 8rpx;
  padding: 84rpx 0 32rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=ad8a5c3b3302368ff50877b39f866cb4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_18 {
  margin-left: 32rpx;
  line-height: 26.68rpx;
}
.section_10 {
  padding: 24rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=79b960d9962bdb94bff7fed38975e025.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_5 {
  position: absolute;
  left: 6.2rpx;
  right: 7.8rpx;
  top: 0;
}
.section_12 {
  margin-left: 28rpx;
  margin-right: 24rpx;
  padding: 40rpx 32rpx 28rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=5955fc6f737735e6e27910facaf7bf83.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_14 {
  color: #999999;
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  line-height: 19.46rpx;
}
.text_15 {
  line-height: 42rpx;
}
.group_6 {
  padding-top: 8rpx;
}
.equal-division-item {
  flex: 1 1 194rpx;
}
.image_8 {
  height: 194rpx;
}
.image-wrapper {
  padding: 96rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=761a00e2661c3ce7a1771c70ebfb3f6d.png');
  background-position: 0% 0%;
  background-size: 194rpx 194rpx;
  background-repeat: no-repeat;
  height: 194rpx;
}
.image_10 {
  border-radius: 76rpx;
  width: 60rpx;
  height: 4rpx;
}
.image-wrapper_2 {
  padding: 72rpx 0;
  background-color: #ffffff;
  border-radius: 12rpx;
  height: 194rpx;
}
.image_9 {
  width: 54rpx;
  height: 54rpx;
}
.image_7 {
  width: 32rpx;
  height: 32rpx;
}
.pos_7 {
  position: absolute;
  left: 170rpx;
  top: 0;
}
.text_16 {
  line-height: 24.88rpx;
}
.section_11 {
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=91a41386a5613a26620f70907983529e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 192rpx;
}
.pos_6 {
  position: absolute;
  left: 15.8rpx;
  top: 14.1rpx;
}
.text_13 {
  line-height: 30.04rpx;
}
.pos_8 {
  position: absolute;
  left: 22rpx;
  top: 706.1rpx;
}
.text_17 {
  line-height: 30.84rpx;
}
</style>
    
      